<template>
  <view class="order_info">
    <u-navbar leftText="查看" leftIcon="arrow-left" leftIconColor="#000" color="#000" safeAreaInsetTop bgColor="transparent"
      fixed @leftClick="leftClick">
    </u-navbar>

    <view class="info_top">
      <view class="top1">
        <view class="use_status">
          <text v-if="orderInfo.orderUseStatus == 0">待入园</text>
          <text v-if="orderInfo.orderUseStatus == 1">已入园</text>
        </view>
        <view class="text1"> 感谢您的信任，欢迎您的光临！ </view>
        <view class="code_btn">
          <text v-if="orderInfo.orderUseStatus == 0" class="code" @click="seeCode">二维码入园</text>
          <text v-else class="code" @click="reorder">再次预定</text>
        </view>
      </view>
      <view class="top2">
        <view class="top2_top">
          <view>
            <text style="color: #ff841c; margin-right: 10rpx">不可取消 </text>
            <text style="color: #000">订单确认后，不可取消</text>
          </view>
          <view>
            <uni-icons type="forward" size="14" color="#0E9589" @click="seeCancelOrDetail"></uni-icons>
          </view>
        </view>
        <view class="top2_bottom">
          <view class="top2_title">
            <uni-icons type="info" size="18" color="#FF841C"></uni-icons>
            温馨提示
          </view>
          <view>· 请按预约时间入园，超出预约时间将无法入园</view>
          <view>· 入园请佩戴好口罩</view>
          <view>· 刷身份证入园</view>
        </view>
      </view>
      <view class="online_pay">
        <view>
          <text>在线付</text>
          <text class="totalPrice">￥{{ orderInfo.totalPrice }}</text>
        </view>
        <view class="mingxi" @click="seeMoney">
          费用明细
          <uni-icons type="forward" size="14" color="#0E9589"></uni-icons>
        </view>
      </view>
      <!-- 门票信息 -->
      <view class="piao_info">
        <view class="info_item" v-for="(order, index) in orderInfo.orderJingquAndmenpiaoInfoVos" :key="index">
          <view class="info_title">{{ order.menpiaoCategoryName }}</view>
          <view class="info_arr f_c_spb">
            <view class="info_left">
              <image style="width: 176rpx;height: 176rpx;border-radius: 10rpx;" :src="order.jingquPictureUrl" />
            </view>
            <view class="info_right">
              <view class="menpiao_note">{{ order.menpiaoNote ? order.menpiaoNote : "" }}</view>
              <view class="order_date">入园日期 {{ order.orderDate }}</view>
              <view class="order_time">入园时间 {{ order.orderStartTime }}-{{ order.orderCloseTime }}</view>
            </view>
          </view>
          <view class="info_map f_c_spb">
            <view class="map_left">
              <view class="jingqu_name">{{ order.jingquName }}</view>
              <view class="jingqu_address">{{ order.jingquAddress }}</view>
            </view>
            <view class="map_right" @click="toNavigation(order)">
              <u-icon name="map-fill" color="#1C96FF" size="24"></u-icon>
              <text>地图</text>
            </view>
          </view>
          <view class="in_info">
            <view>
              <text class="in_title">入园人</text>
              <text style="margin-right: 20rpx;" v-for="(i2, idx2) in order.contracts" :key="idx2">{{ i2.contractName }}</text>
            </view>
            <view>
              <text class="in_title">联系电话</text>
              <text style="margin-right: 20rpx;" v-for="(i2, idx2) in order.contracts" :key="idx2" @click="callTal(i2.contractPhonenumber)">{{
                i2.contractPhonenumber }}</text>
            </view>
          </view>

        </view>
      </view>
      <view class="user_info">
        <view>
          <text>订单号</text>
          <text>{{ orderInfo.orderNo }}</text>
        </view>
        <view>
          <text>卖家</text>
          <text>{{ orderInfo.sellName }}</text>
        </view>
        <view>
          <text>创建时间</text>
          <text>{{ orderInfo.orderCreateTime }}</text>
        </view>
      </view>
      <!-- 显示二维码 -->
      <popup-code :isShowCode="isShowCode" :orderInfo="orderInfo" @close-code="closeCode" />

      <!-- 显示取消政策等 -->
      <cancel-detail :status="status" :title="title" @close-cancel="closeCancel" :isCancel="isCancel"
        :feiyongObj="feiyongObj" />
    </view>
  </view>
</template>
<script>
import {
  getOrderDetailsByIdMainApi, // 根据订单id获取订单详情(我的页面)
  inJIngQuApi, // 入园
} from "@/api/jingqu/piao";

import PopupCode from "./comp/PopupCode.vue";
import CancelDetail from "./comp/CancelDetail.vue";

export default {
  components: {
    PopupCode,
    CancelDetail,
  },
  data() {
    return {
      orderId: 0,
      feiyongObj: {},
      title: "",
      isShowCode: false,
      isCancel: false,
      status: 0,
      orderInfo: {},
    };
  },
  onLoad(data) {
    this.orderId = data.orderId;
    this.getOrderInfo(data.orderId);
  },
  methods: {
    toNavigation(order) {
      console.log(order)
				let self = this;
				// 询问用户授权获取位置
				uni.authorize({
					scope: "scope.userLocation",
					success: () => {
						uni.getLocation({
							type: "gcj02",
							isHighAccuracy: true,
							success(res) {
								console.log(res);
								uni.showLoading({
									title: "加载中...",
								});
								this.latitude = res.latitude;
								this.longitude = res.longitude;

								let latitude = parseFloat(order.lat);
								let longitude = parseFloat(order.lon);
								let name = order.jingquName;
								let address = order.jingquAddress;

								setTimeout(() => {
									uni.openLocation({
										latitude: latitude,
										longitude: longitude,
										scale: 15,
										name,
										address,
										complete(res) {
											uni.hideLoading();
											console.log(res);
										},
									});
								}, 10);
							},
							fail(err) {
								console.log(err);
							},
						});
					},
					fail: (err) => {
						console.log(
							"授权失败",
							uni.getLocation({
								type: "gcj02",
								isHighAccuracy: true,
								success(res) {
									console.log(res);
									this.latitude = res.latitude;
									this.longitude = res.longitude;

									let latitude = Number(this.infoObj.lat);
									let longitude = Number(this.infoObj.lon);
									let name = this.infoObj.jingquName;
									let address = this.infoObj.jingquAddress;

									setTimeout(() => {
										uni.openLocation({
											latitude: latitude,
											longitude: longitude,
											scale: 15,
											name,
											address,
											complete(res) {
												console.log(res);
											},
										});
									}, 500);
								},
								fail(err) {
									console.log(err);
								},
							})
						);
					},
				});
			},
    // 再次预定
    reorder() {
			uni.switchTab({
				url:"/pages/liveAction/index"
			})
		},

    // 打电话
    callTal(item) {
      uni.makePhoneCall({
        phoneNumber: item
      })
    },

    // 查看消费明细
    seeMoney() {
      this.title = "费用明细";
      this.feiyongObj = this.orderInfo;
      console.log(this.feiyongObj)
      this.status = 1;
      this.isCancel = true;
    },

    // 查看取消政策或消费明细
    closeCancel() {
      this.isCancel = false;
      this.feiyongObj = {};
    },
    seeCancelOrDetail() {
      this.title = "取消政策";
      this.status = 0;
      this.isCancel = true;
    },

    // 查看二维码
    seeCode() {
      this.isShowCode = true;
    },

    // 关闭二维码
    closeCode(isIn) {
      if (!isIn) {
        this.orderInfo = {};
        this.isShowCode = false;
        return;
      }
      inJIngQuApi(this.orderId)
        .then((res) => {
          console.log(res);
          if (res.code === 200) {
            uni.showToast({
              title: "入园成功",
              icon: "success",
            });
            this.orderInfo = {};
            this.isShowCode = false;
            uni.navigateBack({delta: 1});
          } else {
            uni.showToast({
              title: "入园失败",
              icon: "error",
            });
          }
        })
        .catch((err) => {
          uni.showToast({
            title: "入园失败",
            icon: "error",
          });
        });
    },

    // 获取数据
    getOrderInfo(id) {
      getOrderDetailsByIdMainApi(id)
        .then((res) => {
          console.log(res,'resresresres');
          if (res.code === 200) {
            this.orderInfo = res.data;

            // for (let i = 0; i < this.orderInfo.orderJingquAndmenpiaoInfoVos.length; i++) {
            // 	let item = this.orderInfo.orderJingquAndmenpiaoInfoVos[i];
            // 	item.markers = [
            // 		{
            // 			latitude: Number(item.lat),
            // 			longitude: Number(item.lon),
            // 			iconPath: '/static/images//main/location.png'
            // 		}
            // 	]
            // }
          } else {
            this.orderInfo = {};
          }
        })
        .catch((err) => {
          console.log(err);
          this.orderInfo = {};
        });
    },

    // 返回上一页
    leftClick() {
      uni.navigateBack({
        delta: 1,
      });
    },
  },
};
</script>
<style>
page {
  background: #f2f3f2;
  height: 110%;
}
</style>

<style lang="scss" scoped>
.f_c_spb {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.order_info {
  width: 750rpx;

  .info_top {
    width: 100%;
    height: 772rpx;

    .top1 {
      width: 100%;
      height: 444rpx;
      background: linear-gradient(296deg, #eaffec 0%, #cffded 100%);
      padding-top: 208rpx;
      padding-left: 30rpx;
      color: #333333;

      .use_status {
        font-size: 52rpx;
        line-height: 64rpx;
      }

      .text1 {
        font-size: 28rpx;
        line-height: 32rpx;
        margin: 12rpx 0 32rpx 0;
      }

      .code {
        display: inline-block;
        width: 192rpx;
        height: 64rpx;
        line-height: 64rpx;
        text-align: center;
        border-radius: 164rpx;
        border: 2rpx solid #0e9589;
        font-size: 28rpx;
        color: #0e9589;
      }
    }

    .top2 {
      width: 100%;
      height: 328rpx;
      padding: 0 32rpx;
      font-size: 28rpx;
      background: #FFFFFF;

      .top2_top {
        height: 92rpx;
        line-height: 92rpx;
        display: flex;
        align-content: center;
        justify-content: space-between;
      }

      .top2_bottom {
        font-size: 24rpx;
        color: #333333;
        line-height: 46rpx;

        .top2_title {
          font-size: 32rpx;
          color: #333333;
          line-height: 46rpx;
        }
      }
    }

    .online_pay {
      width: 750rpx;
      height: 104rpx;
      padding: 0 30rpx;
      background: #FFFFFF;
      margin: 16rpx 0;
      display: flex;
      align-items: center;
      justify-content: space-between;
      color: #333333;
      font-size: 32rpx;

      .totalPrice {
        margin-left: 8rpx;
        color: #FF841C;
      }

      .mingxi {
        font-size: 28rpx;
        color: #0E9589;
      }
    }

    .piao_info {
      background: #fff;
      padding: 30rpx;
      margin-bottom: 16rpx;

      .info_item {
        padding-bottom: 30rpx;

        .info_title {
          font-size: 36rpx;
          color: #333333;
          line-height: 50rpx;
          margin-bottom: 24rpx;
        }

        .info_arr {

          .info_left {
            width: 180rpx;
            margin-right: 24rpx;
          }

          .info_right {
            display: flex;
            flex-direction: column;
            align-items: baseline;

            height: 176rpx;
            width: 100%;
            text-align: left;
            font-size: 24rpx;
            color: #999999;
            line-height: 32rpx;


            .menpiao_note {
              font-size: 32rpx;
              color: #333333;
              line-height: 45rpx;
            }
          }
        }

        .info_map {
          width: 100%;
          height: 152rpx;
          background: linear-gradient(360deg, #DDF4FF 0%, #F7FDFF 100%);
          border-radius: 8rpx;
          padding: 0 48rpx 0 30rpx;
          font-size: 20rpx;
          color: #1C96FF;
          margin-top: 10rpx;
          margin-bottom: 20rpx;

          .map_left {
            .jingqu_name {
              font-size: 24rpx;
              margin-bottom: 44rpx;
              color: #333333;
            }

            .jingqu_address {
              font-size: 20rpx;
              color: #666666;
              line-height: 28rpx;
            }
          }

          .map_right {
            text-align: center;
          }
        }

        .in_info {
          font-size: 24rpx;
          color: #333333;

          view {
            margin: 14rpx 0;

            .in_title {
              display: inline-block;
              width: 120rpx;
              font-size: 24rpx;
              color: #999999;
            }
          }
        }
      }
    }

    .user_info {
      width: 100%;
      height: 210rpx;
      background: #FFFFFF;
      padding: 0 30rpx;

      view {
        height: 70rpx;
        line-height: 70rpx;
        display: flex;
        align-items: center;
        font-size: 24rpx;

        text {
          &:first-child {
            display: inline-block;
            width: 120rpx;
            color: #999999;
          }

          &:last-child {
            color: #333333;
          }
        }
      }
    }
  }
}
</style>
